<template>
	<view class="type">
		<view :class="['type_one',index/2==0 ? 'bg1':'bg2']" v-for="(item,index) in typeListOne" :key="item.id" @tap="goToProductsList(item.id)">
			<view class="one_tit">
				{{item.name}}
			</view>
			<image class="one_img" :src="item.icon" mode=""></image>
		</view>
		<view class="two_out">
			<view class="type_two" v-for="item in typeListTwo" :key="item.id" @tap="goToProductsList(item.id)">
				<image class="two_img" :src="item.icon" mode=""></image>
				<view class="two_tit">
					{{item.name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// api
	import {
		findCategory
	} from "@/api/home/index.js"
	export default {
		data() {
			return {
				typeListOne: [],
				typeListTwo: [],
			}
		},
		onLoad() {
			this.getTypeList();
		},
		methods: {
			// 获取分类数据
			getTypeList() {
				let id = '1308336521604599809';
				findCategory(id).then(res => {
					// console.log(res);
					let {
						children
					} = res.data.data.category;
					this.typeListOne = children.slice(0, 2);
					this.typeListTwo = children.slice(2, 4);
					// console.log(this.typeListOne);
					// console.log(this.typeListTwo);
				})
			},
			//分类跳转到商品列表
			goToProductsList(id){
				uni.navigateTo({
					url:'/pages/typeProductsList/typeProductsList?id=' +id
				})
			},
		}
	}
</script>

<style lang="scss">
	.type {
		margin: 0 40rpx;

		.type_one {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 670rpx;
			height: 302rpx;

			border-radius: 20px;
			margin: 56rpx 0;

			.one_tit {
				margin-left: 52rpx;
				font-size: 24px;
				color: #3e3e3e;
			}

			.one_img {
				width: 402rpx;
				height: 100%;
			}

		}

		.two_out {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.type_two {
				position: relative;
				width: 312rpx;
				height: 442rpx;

				.two_img {
					width: 100%;
					height: 100%;
				}

				.two_tit {
					position: absolute;
					top:  148rpx;
					left: 52rpx;
					font-size: 24px;
					color: #3e3e3e;
				}
			}
		}

		.bg1 {
			background: #d5d5d5;
		}

		.bg2 {
			background: #fff;
		}
	}
</style>
